<!--
 * @Description:收藏
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-5-31 9:10:00
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-10 17:30:01
-->
<template>
	<view class="collect-container">

		<c-layout>
			<c-navigation-bar navbarBgColor="" leftIconColor="" titleColor="" :title="$t('user.MyCollection')" slot="head">
			</c-navigation-bar>
			<!-- <search naverSearchActive="transparent" title="收藏" ></search> -->
			<view class="content-box">
				<view class="header">
					<view class="check-box">
						<view :class="`check-item ${current === index?'is-checked':''}`" v-for="(item,index) in list"
							@click="swiperChange(index)" :key="index">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="list-box">
					<view class="good-box" v-if="!current">
						<scroll-list ref="goodList" :option="queryParams" @refresh="refresh" @load="loadMore">
							<cartItem :checkShow="false" herat
							
								:data="{...item,name:item.goodsName,image:item.goodsImg,goodsId:item.shopGoodsId}"
								v-for="(item,index) in this.mainData.goods.list" :key="index">
								<u-button class="slot-btn" slot="btn" @click="cancelCollectAjax(item.shopGoodsId)">
									<u-icon name="heart-fill"></u-icon>
								</u-button>
							</cartItem>
						</scroll-list>
				
					</view>
					<view class="video-box" v-else>
						<template v-for="(item,index) in mainData.video.list">
							<!-- {{item}} -->
							<videoCard @videoInfo="videoClick(item,index)" :key="item.id"
								:details="{...item,img:$u.appImage.getOssVideoCover(item.url)}"></videoCard>
						</template>

					</view>
				</view>
			</view>
		</c-layout>
		<u-modal v-model="videoModelShow" mask-close-able :show-title="false" :show-confirm-button="false" height="auto"
			width="auto" class="video-model">
			<video style="display: block;" autoplay :src="$u.file.getMedieUrl(activeVideoUrl)"></video>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: this.$t('user.commodity')
					},
					{
						name: this.$t('user.shortVideo')
					},
				],
				current: 0,
				// 主要数据
				mainData: {
					goods: {
						isGet: false,
						list: [],
						data: {
							"pageSize": 10,
							"pageNum": 1,
						}
					},
					video: {
						isGet: false,
						list: [],
						data: {
							"pageSize": 10000,
							"pageNum": 1,
							"startTime": "",
							"endTime": "",
							"id": "",
							"name": "",
							"type": ""
						},
					},
				},
				// 商品列表
				commodityList: [],
				// 视频列表
				videoList: [{
						img: require('static/images/home/banner-1.png'),
						id: '1',
						url: ''
					},
					{
						img: require('static/images/home/good-1.png'),
						id: '2',
						url: ''
					},
					{
						img: require('static/images/home/good-2.png'),
						id: '3',
						url: ''
					},
					{
						img: require('static/images/home/banner-1.png'),
						id: '4',
						url: ''
					},
					{
						img: require('static/images/home/banner-1.png'),
						id: '5',
						url: ''
					},
				],
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle',
					title: "上传"
				},
				videoModelShow: false, // 视频弹窗状态
				activeVideoUrl: '', // 当前短视频路径
			}
		},
		onLoad() {
			this.getGoodsCollectAjax(false, false, 'refreshSuccess')
		},
		computed: {
			queryParams() {
				return {
					pageNum: 1,
					size: this.mainData.goods.data.pageSize,
					offsetBottom: 10,
					contentHeight: 0,
					safeArea: true,
					auto: false,
					emptyText: this.$t('system.NoRecord'),
					noMoreText: this.$t('system.NoFurtherDataAvailable'),
					showPullDown: false,
					loadDisabled: false
				}
			},
		},
		methods: {
			// 获取
			getCollect() {

			},
			// 获取商品收藏列表
			getGoodsCollectAjax(get = true, more, refresh = 'loadSuccess') {
		
				this.$u.post('/app/shop/interestShopGoods/page', this.mainData.goods.data).then(res => {
					this.mainData.goods.isGet = true
					this.mainData.goods.list = more ? [...this.mainData.goods.list, ...res.data.records] : res.data
						.records || []
					this.$refs.goodList[refresh]({
						list: this.mainData.goods.list,
						total: res.data.nextPage ? this.mainData.goods.list.length + 1 : 0
					});
				}).catch(err => {
					this.$refs.goodList.loadFail()
				})
			},
			// 获取视频收藏列表
			getVideoCollectAjax(get = true, more) {
				this.$u.post('/app/short/user/page/' + '1', this.mainData.video.data).then(res => {
					this.mainData.video.list = res.data
						.records
					console.log(this.mainData.video.list)
				})
			},
			loadMore() {
				this.mainData.goods.data.pageNum += 1
				this.getGoodsCollectAjax(false, true)
			},
			refresh(paging) {
				console.log(paging);
				this.mainData.goods.list = []
				this.mainData.goods.data = { pageNum: paging.page, pageSize: paging.size }
				this.getGoodsCollectAjax(false, false, 'refreshSuccess')
			},
			// 取消收藏
			cancelCollectAjax(id) {
				this.$u.post('/app/shop/interestShopGoodsCancel/' + id).then(res => {
					this.$u.toast(this.$t('product.UncollectSuccessfully'))
					this.mainData.goods.list = []
					this.mainData.goods.data.pageNum = 1
					this.$u.post('/app/shop/interestShopGoods/page', this.mainData.goods.data).then(res => {
						this.mainData.goods.list = res.data
							.records ? res.data
							.records : []
					})
				})
			},
			// 轮播滑动后
			swiperChange(index) {
				this.current = index
				this.current ? this.getVideoCollectAjax() : this.getGoodsCollectAjax()
			},
			videoClick(item,index) {
				this.$u.vuex('vuex_video_record', { list: this.mainData.video.list, index: index, show: true })
				uni.navigateTo({
					url: "/pages/public/recordVideo/recordVideo",
					"animationType": "slide-in-right",
					"animationDuration": 300
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.collect-container {
		background-color: #F7F8FA;
		height: 100vh;
		font-family: SFUIDisplay-Medium-Regular, SFUIDisplay-Medium;
		.content-box {
			height: 100%;
			display: flex;
			flex-direction: column;
			padding-left: 0;
			padding-right: 0;
			>.header {
				display: flex;
				justify-content: center;

				.check-box {
					width: 468rpx;
					display: flex;

					.check-item {
						flex: 1;
						height: 60rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #F1F2F6;
						color: #ACB1C0;
						transition: .2s;

						&.is-checked {
							background-color: #fff;
							color: #1E2432;
						}
					}
				}
			}

			.list-box {
				margin-top: 20rpx;
				flex: auto;
				background-color: #fff;
				border-top: 2rpx solid #E5E5E5;
				padding-top: 56rpx;


				.good-box{
					padding: 0 30rpx;
				}

				.video-box {
					display: flex;
					flex-wrap: wrap;
					padding: 0 30rpx;

					.video-card-container {
						margin-bottom: 18rpx;
					}

					.video-card-container:not(:first-child):not(:nth-child(3n+1)) {
						margin-left: 20rpx;
					}
				}



				.cart-item-container {
					margin-bottom: 30rpx;

					.slot-btn {
						padding: 0;
						background-color: #fff !important;
						height: fit-content;
						margin-top: 10rpx;

						.u-icon {
							color: #FF2D55;
						}
					}
				}
			}
		}

		/deep/ .video-model {
			.u-model__title {
				display: none;
			}
		}
	}
</style>